<template>
  <div>
    <main-nav></main-nav>
    <div class="container margin-top-20">
      <h1 class="profile">个人中心</h1>
      <i-row class="clearfix margin-top-15 manage-container" :gutter="10">
        <i-col :md="4" :sm="24">
          <i-menu theme="light" class="left-nav" @on-select="menuItemSelected" :activeName="active">
            <i-menu-group title="课程">
              <i-menu-item name="/manage/courses/created" v-if="account.role === 1">
                <i-icon type="ios-videocam"></i-icon>
                <span>我的</span>
                <a class="pull-right link" href="javascript:;" @click="newCourse($event)">添加</a>
              </i-menu-item>
              <i-menu-item name="/manage/courses/viewed">
                <i-icon type="eye"></i-icon>
                <span>看过</span>
              </i-menu-item>
              <i-menu-item name="/manage/courses/favored">
                <i-icon type="heart"></i-icon>
                <span>收藏</span>
              </i-menu-item>
              <i-menu-item name="/manage/courses/downloaded">
                <i-icon type="ios-download"></i-icon>
                <span>下载</span>
              </i-menu-item>
            </i-menu-group>
            <i-menu-group title="提醒">
              <i-menu-item name="/manage/notifications">
                <i-icon type="ios-bell"></i-icon>消息
              </i-menu-item>
            </i-menu-group>
          </i-menu>
        </i-col>
        <i-col :md="20" :sm="24">
          <router-view class="manage-body" @loaded="loaded"></router-view>
        </i-col>
      </i-row>
    </div>
  </div>
</template>

<script>
import MainNav from '../components/main-nav'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      index: 0,
      active: ''
    }
  },
  computed: {
    ...mapGetters({
      account: 'account'
    })
  },
  components: {
    MainNav
  },
  methods: {
    menuItemSelected(route) {
      this.$router.push({ path: route })
    },
    loaded(path) {
      this.active = path
    },
    newCourse(e) {
      this.$router.push({ name: 'manage-new-course' })
      e.stopPropagation()
    }
  }
}
</script>

<style lang="less">
h1.profile {
  // font-weight: normal;
  font-size: 18px !important;
  // border-bottom: 1px solid #ccc;
  padding: 10px 0 !important;
}
.left-nav {
  padding: 15px 0 !important;
  width: 100% !important;
  margin-bottom: 20px !important;
  .ivu-menu-item-group-title,
  .ivu-menu-item {
    font-size: 13px !important;
  }
  .ivu-menu-item {
    padding: 10px 24px !important;
  }
  .ivu-menu-item-group-title {
    padding-left: 20px !important;
    height: 30px !important;
    line-height: 30px !important;
  }
  .link {
    text-decoration: underline;
    padding: 0 5px;
    &:hover {
      background: #ccc;
      border-radius: 4px;
      text-decoration: none;
    }
  }

  .ivu-icon {
    width: 13px;
    text-align: center;
  }
}
.manage-container {
  min-height: 600px;
}
</style>
